
<template>
  <div class="app-container" style="width: 100%; height: calc(100vh - 84px)">
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <el-col :span="8">
        <div id="myChart1" style="width: 100%; height: 300px"></div
      ></el-col>
      <el-col :span="8">
        <div id="myChart2" style="width: 100%; height: 300px"></div
      ></el-col>
      <el-col :span="8">
        <div id="myChart3" style="width: 100%; height: 300px"></div
      ></el-col>
    </el-row>
    <el-row style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px">
      <div id="myChart4" style="width: 100%; height: 300px"></div>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
import { listData } from "@/api/system/data";
import { maxlist } from "@/api/system/data";
export default {
  name: "Data",
  data() {
    return {
      // 遮罩层
      loading: true,
      focusData: {
        address: "上海",
        aqi: "250",
        createBy: "admin",
        createTime: "2020-11-07 00:06:24",
        dataId: 7,
        dataScope: null,
        fengsu: "3",
        fengxiang: "4",
        jibie: "高度污染",
        lat: "31.224939",
        lng: "121.477323",
        params: {},
        pm10: "10",
        pm25: "10",
        qiya: "4",
        remark: null,
        searchValue: null,
        shidu: "23",
        tsp: "2",
        updateBy: null,
        updateTime: null,
        wendu: "2",
        wuran: "PM2.5",
        visible: false,
        zaosheng: "2",
      },
    };
  },
  mounted() {
    console.log(this.$route)
    this.focusData = this.$route.query
    this.getList();
  },
  methods: {
    /** 查询监测数据列表 */
    getList() {
      var op2 = {
        series: [
          {
            min: -30,
            max: 50,
            name: "温度",
            type: "gauge",
            detail: { formatter: "{value}°" },
            data: [{ value: this.focusData.wendu, name: "温度" }],
          },
        ],
      };
      let myChart2 = echarts.init(document.getElementById("myChart1"));
      myChart2.setOption(op2);

      var op3 = {
        series: [
          {
            min: 0,
            max: 100,
            name: "湿度",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: this.focusData.shidu, name: "湿度" }],
          },
        ],
      };
      let myChart3 = echarts.init(document.getElementById("myChart2"));
      myChart3.setOption(op3);

      var op4 = {
        series: [
          {
            min: 0,
            max: 36,
            name: "风速",
            type: "gauge",
            detail: { formatter: "{value}m/s" },
            data: [
              {
                value: this.focusData.fengsu,
                name: "风速/" + this.focusData.fengxiang,
              },
            ],
          },
        ],
      };
      let myChart4 = echarts.init(document.getElementById("myChart3"));
      myChart4.setOption(op4);

      listData({'address':this.focusData.address}).then(
        (response) => {
          var ar = {};
          this.dataList = response.rows;
          this.dataList = this.dataList.sort(function (a, b) {
            return a.dataId - b.dataId;
          });
          var times = [];
          var wendu = [];
          var shidu = [];
          var qiya = [];
          var pm25 = [];
          var pm10 = [];
          var aqi = [];
          this.dataList.forEach((e) => {
            if (ar[e.wuran] == undefined) {
              ar[e.wuran] = 1;
            } else {
              ar[e.wuran] = ar[e.wuran] + 1;
            }
            times.push(e.createTime);
            wendu.push(e.wendu);
            shidu.push(e.shidu);
            qiya.push(e.qiya);
            pm25.push(e.pm25);
            pm10.push(e.pm10);
            aqi.push(e.aqi);
          });
          var op5  = {
            title: {
              text: "历史指标监测",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["温度", "湿度", "气压", "PM2.5", "PM10", "AQI"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: times,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "温度",
                type: "line",
                stack: "总量",
                data: wendu,
              },
              {
                name: "湿度",
                type: "line",
                stack: "总量",
                data: shidu,
              },
              {
                name: "气压",
                type: "line",
                stack: "总量",
                data: qiya,
              },
              {
                name: "PM2.5",
                type: "line",
                stack: "总量",
                data: pm25,
              },
              {
                name: "PM10",
                type: "line",
                stack: "总量",
                data: pm10,
              },
              {
                name: "AQI",
                type: "line",
                stack: "总量",
                data: aqi,
              },
            ],
          };
          let myChart5 = echarts.init(document.getElementById("myChart4"));
          myChart5.setOption(op5);
        }
      );
    },
  },
};
</script>